"use client";

// 导入必要的组件和库
import { Actions } from "@/components/actions";
import { Hint } from "@/components/hint";
import { Button } from "@/components/ui/button";
import { api } from "@/convex/_generated/api";
import { Id } from "@/convex/_generated/dataModel";
import { cn } from "@/lib/utils";
import { useRenameModal } from "@/store/use-rename-modal"; 
import { useQuery } from "convex/react";
import { Menu } from "lucide-react";
import { Poppins } from "next/font/google";
import Image from "next/image";
import Link from "next/link";

// 定义界面属性
interface InfoProps {
  boardId: string;
}

// 定义字体变量
const font = Poppins({
  subsets: ["latin"],
  weight: ["600"],
});

// 定义标签分隔符组件
const TabSeparator = () => {
  return <div className="text-neutral-300 px-1.5">|</div>;
};

/**
 * 渲染看板信息组件
 * @param boardId - 看板的唯一标识符
 * @returns 看板信息的JSX元素
 */
export const Info = ({ boardId }: InfoProps) => {
  // 使用重命名模态对话框的钩子
  const { onOpen } = useRenameModal();

  // 使用查询钩子获取看板数据
  const data = useQuery(api.board.get, {
    id: boardId as Id<"boards">,
  });

  // 如果数据不存在，则渲染骨架屏
  if (!data) return <InfoSkeleton />;

  // 渲染看板信息组件的主体内容
  return (
    <div className="absolute top-2 left-2 bg-white rounded-md px-1.5 h-12 flex items-center shadow-md">
{      // 渲染返回看板的按钮
}      <Hint label="Go to boards" side="bottom" sideOffset={10}>
        <Button asChild variant="board" className="px-2">
          <Link href="/">
            <Image src="/logo.svg" alt="Board Logo" height={40} width={40} />
            <span
              className={cn(
                "font-semibold text-xl ml-2 text-black",
                font.className
              )}
            >
              Board
            </span>
          </Link>
        </Button>
      </Hint>
{      // 渲染标签分隔符
}      <TabSeparator />
{      // 渲染编辑标题的按钮
}      <Hint label="Edit title" side="bottom" sideOffset={10}>
        <Button
          variant="board"
          className="text-base font-normal px-2"
          onClick={() => onOpen(data._id, data.title)}
        >
          {data.title}
        </Button>
      </Hint>
{      // 再次渲染标签分隔符
}      <TabSeparator />
{      // 渲染操作按钮
}      <Actions id={data._id} title={data.title} side="bottom" sideOffset={10}>
        <div>
          <Hint label="Main menu" side="bottom" sideOffset={10}>
            <Button size="icon" variant="board">
              <Menu />
            </Button>
          </Hint>
        </div>
      </Actions>
    </div>
  );
};

/**
 * 渲染看板信息的骨架屏组件
 * @returns 骨架屏的JSX元素
 */
export function InfoSkeleton() {
  return (
    <div className="absolute top-2 left-2 bg-white rounded-md px-1.5 h-12 flex items-center shadow-md w-[300px]" />
  );
}